@import "src/variables";

.monitoring__container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  &-search {
    input {
      height: 38px;
      margin: 8px 8px;
      color: $default-black;
      font-size: 0.9rem;
      padding-left: 8px;
      padding-right: 18px;
      border-radius: 2px;
      border-top-right-radius: 0.4rem;
      border-bottom-right-radius: 0.4rem;
      border: none;
      font-weight: 100;
      background: $default-white;
      font-family: 'Open Sans', sans-serif;
      -webkit-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      -moz-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      box-shadow: 7px 0px 24px -2px $box-shadow-color;

      &:focus {
        outline: none;

      }
    }

    .loading-indicator {
      height: 38px;
      display: inline-flex;
      position: absolute;
      top: 16px;
      background-color: transparent;

      .circle-border {
        width: 20px;
        height: 20px;
        padding: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: linear-gradient(0deg, $light-background-color 35%, $dark-background-color 100%);
        animation: spin 1s linear 0s infinite;
      }

      .circle-core {
        width: 100%;
        height: 100%;
        background: $light-background-color;
        border-radius: 50%;
      }

      @keyframes spin {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(359deg);
        }
      }


    }
  }

  button {
    margin: 8px 8px 8px 0;
    float: right;
    height: 38px;
    border-radius: 2px;
    color: $default-white;
    cursor: pointer;
    border: none;
    outline: none;
    background: $default-black;


    span {
      display: flex;
      font-size: 1.1em;
      font-weight: lighter;
      align-items: center;
      justify-content: space-between;
      min-width: 100px;
      margin-left: 8px;

    }

    img {
      width: 32px;
      padding: 7px;
      justify-content: flex-end;
    }

    &:hover {
      background: $default-black-hover;
      -webkit-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      -moz-box-shadow: 7px 0px 24px -2px $box-shadow-color;
      box-shadow: 7px 0px 24px -2px $box-shadow-color;
    }

    &:active {
      -webkit-box-shadow: 7px 0px 24px -2px $dark-background-color;
      -moz-box-shadow: 7px 0px 24px -2px $dark-background-color;
      box-shadow: 7px 0px 24px -2px $dark-background-color;

    }

  }

  &-output {
    height: 100%;
  }
}
